{% extends 'base.html' %}
{% load site_tags %}

{% block title %}{{ portfolio_user.get_display_name }} — Portfolio — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="bg-primary text-white py-4">
  <div class="container">
    <p class="mb-1 text-white-50 small text-uppercase letter-spacing">Public portfolio</p>
    <h2 class="fw-bold mb-1">{{ portfolio_user.get_display_name }}</h2>
    <p class="mb-0 small">@{{ portfolio_user.username }} · Learning Path projects (approved)</p>
  </div>
</section>

<section class="py-5">
  <div class="container">
    {% if by_course %}
      {% for course, items in by_course.items %}
      <div class="mb-5">
        <div class="d-flex align-items-center gap-2 mb-3">
          {% if course.category %}
          <span class="badge bg-primary-subtle text-primary">{{ course.category.name }}</span>
          {% endif %}
          <h4 class="fw-bold mb-0">{{ course.title }}</h4>
        </div>
        <div class="row g-3">
          {% for sub in items %}
          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4">
              {% if sub.screenshot %}
              <img src="{{ sub.screenshot.url }}" class="card-img-top rounded-top-4" alt="" style="height:160px;object-fit:cover;">
              {% else %}
              <div class="bg-light rounded-top-4 d-flex align-items-center justify-content-center" style="height:120px;">
                <i class="bi bi-folder2-open text-muted" style="font-size:2rem;"></i>
              </div>
              {% endif %}
              <div class="card-body">
                <h6 class="fw-bold">{{ sub.project.title }}</h6>
                <p class="small text-muted">{{ sub.project.description|truncatechars:120 }}</p>
                {% if sub.submission_url %}
                <a href="{{ sub.submission_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
                  View project <i class="bi bi-box-arrow-up-right ms-1"></i>
                </a>
                {% elif sub.submission_file %}
                <a href="{{ sub.submission_file.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                  Download submission
                </a>
                {% endif %}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="text-center py-5 text-muted">
        <i class="bi bi-collection" style="font-size:3rem;opacity:.3;"></i>
        <p class="mt-3 mb-0">No approved projects on this portfolio yet.</p>
      </div>
    {% endif %}
  </div>
</section>
{% endblock %}